<template>
<Layout>

  <Content>
   <div>
    <Button type="primary" @click="modalForm = true">添加数据</Button>
    <Button type="primary" @click="removes">删除多个</Button>
    <Input  placeholder="请输入产品名称" v-model="value" style="width: 120px;margin-left:5px;"/>
    <Button type="info" @click="search" style="width:80px;margin-right:7px;">点击搜索</Button>

    <Input  placeholder="筛选是否发布" v-model="value1" style="width: 120px; "/>
    <Button type="info" @click="pub" style="width:80px;margin-right:7px;">点击搜索</Button>

    <Input  placeholder="筛选是否置顶" v-model="value2" style="width: 120px; "/>
    <Button type="info" @click="top" style="width:80px;margin-right:7px;">点击搜索</Button>

    <Input  placeholder="筛选是否添加热度" v-model="value3" style="width: 120px; "/>
    <Button type="info" @click="hot" style="width:80px;margin-right:7px;">点击搜索</Button>

    <Table border :columns="columns" :data="data" @on-selection-change="onSelect"></Table>
    <Page :total="total" :page-size="rows" @on-change="onChangePage" :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange" show-sizer />

    <Modal v-model="modalForm" title="数据操作">
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="分类" prop="cateId">
              <Input v-model="formValidate.cateId" placeholder="请输入分类id"></Input>
        </FormItem>
        <FormItem label="用户" prop="userId">
              <Input v-model="formValidate.userId" placeholder="请输入用户名"></Input>
        </FormItem>
        <FormItem label="产品名称" prop="title">
              <Input v-model="formValidate.title" placeholder="请输入产品名称"></Input>
        </FormItem>
        <FormItem label="内容" prop="content">
              <Input v-model="formValidate.content" placeholder="请输入内容"></Input>
        </FormItem>
        <FormItem label="创作日期" prop="creareDate">
        <Row>
          <Col span="12">
              <DatePicker type="date"  placeholder="Select date" style="width: 208px" v-model="formValidate.creareDate"></DatePicker>
          </Col>
        </Row>
        </FormItem>
        <FormItem label="发布日期" prop="pulishDate">
        <Row>
            <Col span="12">
                <DatePicker type="date"  placeholder="Select date" style="width: 208px" v-model="formValidate.pulishDate"></DatePicker>
            </Col>
        </Row>
        </FormItem>
        <FormItem label="是否发布" prop="isPublish">
            <Select v-model="formValidate.isPublish" style="width:208px">
                <Option v-for="item in cityList" :value="item.value" :key="item.value" >{{ item.label }}</Option>
            </Select>
        </FormItem>
        <FormItem label="是否置顶" prop="isTop">
            <Select v-model="formValidate.isTop" style="width:208px">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </FormItem>
         <FormItem label="是否添加加热度" prop="isHot">
           <Select v-model="formValidate.isHot" style="width:208px">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
      </Form>
      <div slot="footer"> 请仔细确认后再提交</div>
    </Modal>
   </div>
  </Content>
</Layout>
</template>
<script>
import Base from '../../base/Base';
import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
export default {


  mixins: [Base],
  data() {
    return {
        value: '',
        value1: '',
        value2: '',
        value3: '',
      cityList: [
                    {
                        value: 'true',
                        label: 'true'
                    },
                    {
                        value: 'false',
                        label: 'false'
                    }

                ],

      module:'procomment',
      formValidate: {
            cateId    : '',
            userId    : '',
            title     : '',
            content   : '',
            creareDate: '',
            pulishDate: '',
            isPublish : '',
            isTop     : '',
            isHot     : ''
      },
      ruleValidate: {
        cateId: [
          {
            required: true,
            message : '必须输入分类',
            trigger : 'blur'
          }
        ],
        userId: [
          {
            required: true,
            message : '请输入用户名',
            trigger : 'blur'
          }
        ],

        title: [
          {
            required: true,
            message : '请输入产品名称',
            trigger : 'blur'
          }
        ],
         content: [
          {
            required: true,
            message : '必须输入内容',
            trigger : 'blur'
          }
        ],
        creareDate: [
          {
            required: true,
            type:'date',
            message : '请输入创造日期',
            trigger : 'change'
          }
        ],
        pulishDate: [
          {
            required: true,
             type:'date',
            message : '必须输入发布日期',
            trigger : 'change'
          }
        ],
        isPublish: [
          {
            required: true,
            message : '请输入是否发布',
            trigger : 'blur'
          }
          ],

          isTop: [
          {
            required: true,
            message : '请输入是否置顶',
            trigger : 'blur'
          }
          ],
          isHot: [
          {
            required: true,
            message : '请输入是否添加热度',
            trigger : 'blur'
          }

        ]
      },
      columns: [
        {
          type : 'selection',
          width: 60,
          align: 'center'
        },
        {
            title: '分类',
          key  : 'cateId'
        },
        {
          title: '用户名',
          key  : 'userId'
        },

        {
          title: '产品名称',
          key  : 'title'
        },{
          title: '内容',
          key  : 'content'
        },
        {
          title: '创造日期',
          key  : 'creareDate'
        },
        {
          title: '发布日期',
          key  : 'pulishDate'
        },
        {
          title: '是否发布',
          key  : 'isPublish'
        },
        {
          title: '是否置顶',
          key  : 'isTop'
        },
        {
          title: '是否添加热度',
          key  : 'isHot'
        },
        {
          title : '操作',
          key   : 'action',
          width : 150,
          align : 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params.row._id);
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row._id);
                    }
                  }
                },
                '删除'
              ),

            ]);
          }
        }
      ]
    };
  },
  methods:{
  search(){
  this.axios({
        url: `http://10.31.162.52:3000/procomment/list`,
        method: 'post',
        data:{
          title:this.value
        }
    }).then(res => {
      console.log(res);
console.log(this.value);
        this.total = res.data.total;
        this.data = res.data.rows;
    });
  },
   pub(){
     console.log(1);
     this.axios({
        url: `http://10.31.162.52:3000/procomment/list`,
        method: 'post',
        data:{
          isPublish:this.value1

        }

    }).then(res => {
      console.log(this.value);
      console.log(res);
        this.total = res.data.total;
        this.data = res.data.rows;
    });
  },
  hot(){
  this.axios({
        url: `http://10.31.162.52:3000/procomment/list`,
        method: 'post',
        data:{
          isHot:this.value2
        }
    }).then(res => {
      // console.log(res)

        this.total = res.data.total;
        this.data = res.data.rows;
    });
  },
  top(){
  this.axios({
        url: `http://10.31.162.52:3000/procomment/list`,
        method: 'post',
        data:{
          isTop:this.value3
        }
    }).then(res => {
      // console.log(res)

        this.total = res.data.total;
        this.data = res.data.rows;
    });
  }
}
};

</script>
<style>
.ivu-layout-sider{
  background-color: #fff!important;
}

</style>
